<template>
  <div
    class="modal fade"
    id="cartModal"
    role="dialog"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button
            class="close"
            aria-hidden="true"
            type="button"
            data-dismiss="modal"
          >
            ×
          </button>
          <h4 class="modal-title" id="cartTitle">我的购物车</h4>
        </div>
        <form class="form-inline" role="form" method="post">
          <div class="modal-body" id="cartBody">
            <div class="table-responsive">
              <table class="table table-hover table-striped table-condensed">
                <thead>
                  <tr>
                    <th>#</th>
                    <th>商品图片</th>
                    <th>商品名称</th>
                    <th>商品单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, idx) in cartItems" :key="item.goodsId">
                    <td>{{ idx + 1 }}</td>
                    <td>
                      <img
                        :src="SERVER_URL + item.pic"
                        width="50"
                        height="50"
                      />
                    </td>
                    <td>
                      <a href="#" @click.prevent="productDetail(item.goodsId)">{{ item.goodsName }}</a>
                      <br />{{ item.size }}&nbsp;&nbsp;{{ item.color }}
                    </td>
                    <td>
                      原价<span
                        class="glyphicon glyphicon-yen"
                        aria-hidden="true"
                      ></span
                      >{{ item.goodsPrice }}<br />现售<span
                        class="glyphicon glyphicon-yen"
                        aria-hidden="true"
                      ></span
                      >{{ item.goodsDiscount }}
                    </td>
                    <td>
                      <div class="input-group input-group-sm col-xs-5">
                        <input
                          class="form-control input-small"
                          id="cartnum"
                          type="number"
                          v-model="item.num"
                        />
                      </div>
                    </td>
                    <td>
                      <span
                        class="glyphicon glyphicon-yen"
                        aria-hidden="true"
                      ></span
                      >{{ item.num * item.goodsDiscount }}
                    </td>
                    <td><a href="#" @click="delCart(item)">删除</a></td>
                  </tr>
                </tbody>
              </table>
            </div>
            <a href="#" @click="clearCart()">清空购物车</a>
            <div class="text-right">
              已选{{ cartItems.length }}件商品&nbsp;&nbsp;合计（不含运费）<span
                class="glyphicon glyphicon-yen"
                aria-hidden="true"
              ></span
              >{{ totalFee }}
            </div>
          </div>
          <div class="modal-footer">
            <button
              class="btn btn-primary"
              :disabled="cartItems.length==0"
              @click="toCheckout()"
              type="button"
              id="ok"
            >
              去结算
            </button>
            <button ref="closeCartModal" class="btn btn-default" type="button" data-dismiss="modal">
              关闭
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { SERVER_URL } from "../utils/http"
export default {
	data() {
		return {
			SERVER_URL,
		}
	},
	computed: {
	...mapGetters({cartItems:'order/cartItems'}),
	totalFee(){
		let totalFee=0;
			for(let item of this.cartItems){
				totalFee=totalFee+item.num*item.goodsDiscount;
			}
			return totalFee;
	}
	},
	methods: {
    productDetail(id){
      this.$refs.closeCartModal.click();
     this.$router.push({
                          name: 'ProductDetail',
                          params: {id},
                        })
    },
		delCart(item){
			this.$store.dispatch('order/deleteCartItem',item);
		},
		clearCart(){
			this.$store.dispatch('order/clearCartItems')
		},
		toCheckout(){
      this.$store.dispatch('order/toCheckout',{
      success:()=>{
      this.$refs.closeCartModal.click();
      this.$router.push({name:'CheckOut',params:{type:'cart'},props:true});
        },
      fail:()=>{
        this.$toast("赚取结账功能失败");
      }
      })
		
		}
	},
}
</script>
